<template>
  <div>
    <div class="banner">
      <img
        src="https://ccdn.goodq.top/caches/9b69daffc17579b848483c854813cad2/aHR0cDovLzVjZGQzYWE1YzQ2ZWEudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxOS8wNS81NjM0YjlkMWViYWQ3MGRjYWVmYzU0MzQxYTRjM2RhYS05MC53ZWJw.webp"
        alt=""
      />
    </div>
    <div class="text">
      <span
        >中国历史上有很长的饮茶纪录，已经无法确切地查明到底是在什么年代了，但是大致的时代是有说法的。并且也可以找到证据显示，确实在世界上的很多地方饮茶的习惯是从中国传过去的。</span
      >
    </div>
    <div class="tu">
      <div class="one1">
        <div>
          <img
            src="https://ccdn.goodq.top/caches/9b69daffc17579b848483c854813cad2/aHR0cDovLzVjZGQzYWE1YzQ2ZWEudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxOS8wNC9mYzdmNmQ5NzgzM2NiOTlkOWJjZjU1ZDMyY2M2MWI0Ni04MHg4MC05MC53ZWJw.webp"
            alt=""
          />
        </div>
        <div>邮箱</div>
        <p>info@email.com</p>
      </div>
      <div class="tw">
        <div>
          <img
            src="https://ccdn.goodq.top/caches/9b69daffc17579b848483c854813cad2/aHR0cDovLzVjZGQzYWE1YzQ2ZWEudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxOS8wNC9kNjhkMWVhYWNmODIyZDE4ZDE5MjYzYzdlMTljZjc1YS04MHg4MC05MC53ZWJw.webp"
            alt=""
          />
        </div>
        <div>手机</div>
        <p>13725415481/010 6888 6888</p>
      </div>
      <div class="three1">
        <div>
          <img
            src="https://ccdn.goodq.top/caches/9b69daffc17579b848483c854813cad2/aHR0cDovLzVjZGQzYWE1YzQ2ZWEudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxOS8wNC82ZmQ5NDYwYjYzMzVmNTM2ZjUzNjQ1MWJiYmEyMDlkZC04MHg4MC05MC53ZWJw.webp"
            alt=""
          />
        </div>
        <div>地址</div>
        <p>苏州市建外SOHO东区2号楼</p>
      </div>
    </div>
    <div class="content1">
      <ditu></ditu>
    </div>
  </div>
</template>
<script>
import ditu from "../components/ditu.vue";
export default {
  components: {
    ditu,
  },
};
</script>
<style scoped>
.tu {
  /* height: 165px; */
  display: flex;
}
.one1 {
  flex: 1;
}
.one1 > div,
.tw > div,
.three1 > div {
  text-align: center;
  font-family: 微软雅黑;
    font-size: 20px;
    font-weight: normal;
    font-style: normal;
    color: #333333;
    padding-top: 27px;
}
.one1>p,.tw>p,.three1>p{
    color: #bfbfbf;
    font-size: 14px;
    text-align: center;
    line-height: 24px;
}
.tw {
  flex: 1;
}
.three1 {
  flex: 1;
}
.text {
  padding: 0 40px;
}
.text > span {
  display: block;
  width: 60%;
  margin: auto;
  text-align: center;
  padding-top: 80px;
  color: #808080;
  font-size: 14px;
}
.banner {
  padding-top: 80px;
  width: 100%;
  height: 158px;
}
.banner > img {
  width: 100%;
  height: 100%;
}
.content1 {
  padding-top: 80px;
  width: 100%;
  height: 500px;
}
</style>